<template>
  <div class="directorys">
    <el-breadcrumb v-if="$route.query.id" :span="24" class="direct">
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{$route.query.subjectName}}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <span class="add">目录名称：</span>
          <el-input v-model="userObj.tagName"></el-input>
          <span class="add">状态：</span>
          <el-select v-model="userObj.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <!-- </el-form-item> -->
          <el-button size="small" @click="sunm">清除</el-button>
          <el-button size="small" type="primary" @click="xuanran">搜索</el-button>
        </div>
      </el-col>

      <el-col v-if="$route.query.id" :span="12">
        <div class="grid-content bg-purple-light">
          <el-button type="text" @click="$router.push('/subjects/list')">
            <i class="el-icon-back el-icon--right"></i>
            返回学科
          </el-button>

          <el-button @click="jia" type="success" size="small" plain>
            <i class="el-icon-edit el-icon--right"></i>
            新增目录
          </el-button>
        </div>
      </el-col>

      <el-col v-else :span="12">
        <div class="grid-content bg-purple-light">
          <el-button @click="xinzheng" type="success" size="small" plain>
            <i class="el-icon-edit el-icon--right"></i>
            新增课程
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-alert :title="'一共有'+this.counts+'条'" type="info" show-icon></el-alert>

    <!-- v-for="(item,index) in tableData" :key="index"  -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width></el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width></el-table-column>
      <el-table-column prop="tagName" label="标签名称" width></el-table-column>
      <el-table-column prop="username" label="创建者" width></el-table-column>

      <el-table-column label="状态" width>
        <template slot-scope="scope">
          <span v-if="scope.row.state==1">已启用</span>
          <span v-if="scope.row.state==0">已禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250px">
        <!-- 4个操作模板 -->
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-button @click="jinyong(scope.row)" type="text">
            <span v-if="scope.row.state==1">禁用</span>
            <span v-if="scope.row.state==0">启用</span>
          </el-button>
          <el-button
            @click="xougai(scope.row)"
            :disabled="scope.row.state==1?true:false"
            type="text"
          >
            <span>修改</span>
          </el-button>
          <el-button :disabled="scope.row.state==1?true:false" type="text">
            <span @click="shanchu(scope.row)">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userObj.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="userObj.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.counts"
    ></el-pagination>

    <!-- 新增用户的表单对话框 -->
    <el-dialog title="所属学科" :visible.sync="dialogFormVisible" width="20%">
      <el-form ref="formEditDialog" :model="formEdit" :rules="rulesFormEdit" label-width="100px">
        <el-form-item label="所属学科">
          <el-select v-model="values" placeholder="请选择">
            <el-option
              v-for="(item,index) in optionss"
              :key="index"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="tagName" label="目录名称">
          <el-input v-model="formEdit.tagName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editForm(values,formEdit.tagName)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑用户的表单对话框 -->
    <el-dialog title="学校名称" :visible.sync="dialogFormVisiblesss" width="20%">
      <el-form
        ref="formEditDialogs"
        :model="addformEdit"
        :rules="rulesFormEdit"
        label-width="100px"
      >
        <el-form-item label="所属学科">
          <el-select v-model="addformEdit.subjectID" placeholder="请选择">
            <el-option
              v-for="(item,index) in optionss"
              :key="index"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="tagName" label="目录名称">
          <el-input v-model="addformEdit.tagName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblesss = false">取 消</el-button>
        <el-button type="primary" @click="xou">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 跳转后的新增 -->
    <el-dialog title="学校名称" :visible.sync="dialogFormVisibless" width="20%">
      <el-form ref="formEditDialog" :model="aaddformEdit" :rules="rulesFormEdit">
        <el-form-item prop="tagName" label="目录名称" :label-width="formLabelWidth">
          <el-input v-model="aaddformEdit.tagName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="dialogFormVisibless = false">取 消</el-button>
        <el-button type="primary" @click="zneg(aaddformEdit.tagName)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, changeState, add, update } from "@/api/hmmm/tags";
export default {
  watch: {
    $route(to, from) {
      // 执行ajax请求，但只希望在进入时请求，离开时不希望进行请求。
      //  console.log(to.path,8888)
      if (to.path == "/subjects/tags") {
        this.xuanran();
      }
    },
  },

  data() {
    return {
      //跳转后的新增
      dialogFormVisibless: false,
      aaddformEdit: {},
      /* 编辑对话框数据 */
      dialogFormVisiblesss: false,
      addformEdit: {},
      formLabelWidth: "120px",

      // value: "",
      //新增
      optionss: [],
      dialogFormVisible: false,
      formEdit: {},
      values: true,
      // formLabelWidth: "120px",
      values: "",
      value: "",
      options: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "启用",
        },
      ],
      userObj: {
        // qusubjectNameery: "",
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: "",
        state: null,
      },
      input: "",
      tableData: [],
      counts: 1,

      rulesFormEdit: {
        tagName: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.xuanran();
  },
  methods: {
    async xuanran() {
      if (this.$route.query.id) {
        const { data: res } = await list({
          page: 1,
          pagesize: 10,
          subjectID: this.$route.query.id,
          // directoryName: this.$route.query.subjectName,
        });
        // console.log(this.formEdit, 555);
        console.log(res, 111);
        this.tableData = res.items;
        this.counts = res.counts;

        res.items.forEach((item) => {
          this.optionss.push(item);
        });
      } else {
        const { data: res } = await list(this.userObj);
        console.log(res, 111);
        this.tableData = res.items;
        this.counts = res.counts;

        res.items.forEach((item) => {
          this.optionss.push(item);
        });
      }

      console.log(this.optionss, 666);
      console.log(this.tableData);
      // this.counts = res.counts;
      // this.formEditsss = res.items;
      // console.log(this.counts);
      // console.log(this.tableData);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.userObj.pagesize = val;
      this.xuanran();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.userObj.page = val;
      this.xuanran();
    },
    //清空输入框
    sunm() {
      this.userObj.tagName = "";
      this.userObj.state = null;
      this.xuanran();
    },
    //搜索框
    //搜索框
    // async sousuo() {
    //   const { data: res } = await list({
    //     directoryName: this.input,
    //   });
    //   console.log(res);
    //   this.tableData = res.items;
    // },
    //搜索框
    async sousuo(input, value) {
      console.log(value);
      const { data: res } = await list({
        directoryName: input,
        state: value,
      });
      console.log(res, 6666666);
      this.tableData = res.items;
    },
    //删除
    //删除按钮
    async shanchu(id) {
      const res2 = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      console.log(res2, 88899);
      if (res2 == "confirm") {
        const { data: res } = await remove(id);
        // console.log(res, 4455)

        //  重新渲染最新表格数据
        this.xuanran();
      }
    },
    //禁用
    async jinyong(row) {
      if (row.state == 1) {
        row.state = 0;
      } else {
        row.state = 1;
      }
      const res = await changeState(row);
      row.state = res;
      console.log(row);
      this.$message("修改成功");
      this.xuanran();
    },
    //修改
    //修改
    xougai(row) {
      this.addformEdit = row;
      this.dialogFormVisiblesss = true;
    },
    xou() {
      this.$refs.formEditDialogs.validate(async (vaide) => {
        //console.log(vaide,5555556666);
        if (vaide) {
          const { data: res } = await update(this.addformEdit);

          this.dialogFormVisiblesss = false;
          console.log(this.addformEdit, 456);
          //  重新渲染最新表格数据
          this.xuanran();
        } else {
          return;
        }
      });
    },
    //新增
    //新增
    xinzheng() {
      this.dialogFormVisible = true;
    },

    editForm(values, val) {
      console.log(values, val);
      this.$refs.formEditDialog.validate(async (vaide) => {
        //console.log(vaide,5555556666);
        if (vaide) {
          const { data: res } = await add({
            subjectID: values,
            tagName: val,
          });

          this.dialogFormVisible = false;

          //  重新渲染最新表格数据
          this.xuanran();
        } else {
          return;
        }
      });
    },
    //跳转后的添加
    jia() {
      this.dialogFormVisibless = true;
    },
    zneg(val) {
      console.log(this.$route.query.id, val, 89898);
      this.$refs.formEditDialog.validate(async (vaide) => {
        // console.log(vaide,5555556666);
        if (vaide) {
          const { data: res } = await add({
            subjectID: Number(this.$route.query.id),
            tagName: val,
          });
          console.log(res);
          this.dialogFormVisibless = false;
          //  重新渲染最新表格数据
          this.xuanran();
        } else {
          return;
        }
      });
    },
  },
};
</script>


<style scoped lang='scss'>
.directorys {
  padding: 20px;
  background-color: #fff;
  .direct {
    height: 40px;
  }
  .grid-content {
    margin-bottom: 20px;
    display: flex;
    .add {
      line-height: 36px;
      height: 36px;
      width: 80px;
    }
    .el-input--medium {
      width: 200px;
      margin-right: 10px;
      ::v-deep.el-input__inner {
        width: 200px;
      }
    }
  }
  .bg-purple-light {
    position: relative;
    .el-button--success {
      position: absolute;
      right: 0px;
    }
  }
  ::v-deep.dialog-footer {
    text-align: right;
  }
   .el-pagination {
    text-align: right;
    margin-top: 15px;
  }
}
</style>


